<template>
  <el-pagination
    :current-page="page"
    :page-size="limit"
    :page-sizes="[15, 30, 60, 100]"
    :total="total"
    layout="total, sizes, prev, pager, next"
    background
    @current-change="handlePageChange"
    @size-change="handleSizeChange"
  />
</template>

<script>
export default {
  name: 'PaginationBar',
  props: {
    page: Number,
    limit: Number,
    total: Number
  },
  methods: {
    handlePageChange(newPage) {
      this.$emit('update:page', newPage)
    },
    handleSizeChange(newSize) {
      this.$emit('update:limit', newSize)
    }
  }
}
</script>
